<template>
    <div>
        <h3>增加排房</h3>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店</td>
                    <td>
                        <select v-model="querinfo.ShopId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.shoplist" >{{ item.ShopName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">房型</td>
                    <td>
                        <select v-model="querinfo.HouseTypeId" @change="getHouseNoList">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.Houselist">{{ item.HouseTypeName }}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">房号</td>
                    <td>
                        <select v-model="querinfo.HouseNoId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.houseNoList">{{ item.HouseName }}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right">姓名</td>
                    <td>
                        <input type="text" v-model="querinfo.UserName">
                    </td>
                </tr>

                <tr>
                    <td align="right">身份证</td>
                    <td>
                        <input type="text" v-model="querinfo.Card" maxlength="18">
                    </td>
                </tr>

                <tr>
                    <td align="right">手机号</td>
                    <td>
                        <input type="text" v-model="querinfo.Phone" maxlength="11">
                    </td>
                </tr>

                <tr>
                    <td align="right">入住时间</td>
                    <td>
                        <input type="date" v-model="querinfo.BeginTime">
                    </td>
                </tr>

                <tr>
                    <td align="right">离店时间</td>
                    <td>
                        <input type="date" v-model="querinfo.EndTime">
                    </td>
                </tr>


                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="排房" @click="ok" class="btn btn-priamry" >
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, useSlots } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import axios from 'axios';
const route = useRoute();
const router = useRouter();

const querinfo:any=reactive({
  "ShopId": "",
  "HouseTypeId": "",
  "HouseNoId": "",
  "UserName": "",
  "Phone": "",
  "Card": "",
  "BeginTime": "",
  "EndTime": "",
})

let data: any = reactive({
    shoplist: [],
    houselist:[],
    houseNoList:[],
})
onMounted(()=>{
    getList();
    GetHouse();

})
const ok=()=>{
    axios({
         method:"post",
         url:"/api/House/HouseRowAdd",
         data:querinfo
    })
    .then(res=>{
        if(res.data>0){
            alert('排房成功')
        }
    })
    .catch(err=>{
        console.log(err);
    })
}



//获取门店列表数据
const getList = () => {
    axios({
        method: "get",
        url: "/api/Shops/GetShopList",
        params: {
            pageSize:100
        }
    })
        .then(res => {
            data.shoplist = res.data.list;
        })
        .catch(err => {
            console.log(err)
        })
}

//获取房型
const GetHouse = () => {
    axios({
        method: "get",
        url: "/api/House/GetHouseTypeList",
        params: {
            pageSize: 10000
        }
    })
        .then(res => {
            data.Houselist = res.data.list;
        })
        .catch(err => {
            console.log(err);
        })
}
//获取所有的房号列表
const getHouseNoList=()=>{
    axios({
        method:"get",
        url:"/api/House/GetHouseNoList",
        params:{
            PageSize:100,
            houseTypeId:querinfo.HouseTypeId,
            shopId:querinfo.ShopId
        }
    })
    .then(res=>{
        console.log(res);
        data.houseNoList=res.data.list
    })
    .catch(err=>{
        console.log(err);
    })
}

</script>

<style scoped></style>